<template>
	<view>
		<view class="weui-cells weui-cells_after-title" style="margin-top: 30rpx;">
		    <view class="weui-cell weui-cell_input">
		        <view class="weui-cell__hd">
		            <view class="weui-label">昵称：</view>
		        </view>
		        <view class="weui-cell__bd">
		            <input class="weui-input" placeholder="请输入昵称(唯一)" v-model="form.name"
					/>
		        </view>
		    </view>
			<view class="weui-cell weui-cell_input">
			    <view class="weui-cell__hd">
			        <view class="weui-label">我的姓名：</view>
			    </view>
			    <view class="weui-cell__bd">
			        <input class="weui-input" placeholder="请输入用户姓名(必填)" v-model="form.truename"
					/>
			    </view>
			</view>
			<view class="weui-cell weui-cell_input">
			    <view class="weui-cell__hd">
			        <view class="weui-label">手机号码：</view>
			    </view>
			    <view class="weui-cell__bd">
			        <input class="weui-input" placeholder="请输入手机号码(必填)" v-model="form.phone"
					/>
			    </view>
			</view>
			<view class="weui-cell weui-cell_input">
			    <view class="weui-cell__hd">
			        <view class="weui-label">电子邮箱：</view>
			    </view>
			    <view class="weui-cell__bd">
			        <input class="weui-input" placeholder="请输入电子邮箱(选填)" v-model="form.email"
					/>
			    </view>
			</view>
			<view class="weui-cell weui-cell_input">
			    <view class="weui-cell__hd">
			        <view class="weui-label">家庭住址：</view>
			    </view>
			    <view class="weui-cell__bd">
			        <input class="weui-input" placeholder="请输入家庭住址(选填)" v-model="form.address"
					/>
			    </view>
			</view>

			<view class="weui-cell weui-cell_input">
			    <view class="weui-cell__hd">
			        <view class="weui-label">性别：</view>
			    </view>
				<view class="radios-button-outbox weui-input">
					<view class="radios-button-inbox" @click="setSex('男')">
						<image class="icon" :src="form.sex == '男'? '/static/center/card/radio-actived.png'
						   :'/static/center/card/radio-inactived.png'"></image>
						<text class="text">男</text>
					</view>
					<view class="radios-button-inbox"  @click="setSex('女')">
						<image class="icon" :src="form.sex == '女'? '/static/center/card/radio-actived.png'
						   :'/static/center/card/radio-inactived.png'"></image>
						<text class="text">女</text>
					</view>
				</view>
			</view>
			<view class="weui-cell weui-cell_input">
			    <view class="weui-cell__hd">
			        <view class="weui-label">年龄：</view>
			    </view>
			    <view class="weui-cell__bd">
			        <input class="weui-input" placeholder="输入年龄(选填)" v-model="form.age"
					/>
			    </view>
			</view>
			<view class="weui-cell weui-cell_input">
			    <view class="weui-cell__hd">
			        <view class="weui-label">登录密码：</view>
			    </view>
			    <view class="weui-cell__bd">
			        <input class="weui-input" placeholder="输入登录密码" v-model="form.password"
					password="false"/>
			    </view>
			</view>
			<view class="weui-cell weui-cell_input">
			    <view class="weui-cell__hd">
			        <view class="weui-label">确认密码：</view>
			    </view>
			    <view class="weui-cell__bd">
			        <input class="weui-input" placeholder="请再次输入密码" v-model="form.checkPassword"
					password="false"/>
			    </view>
			</view>
		</view>
		<button class="button" @click="validataCode()">立即注册</button>
	</view>
</template>

<script>
//	import md5 from 'js-md5';
	import  { inputCheck, checkPassword } from '@/common/js/inputCheck.js';
	import {error} from '@/common/js/errorTips.js'
	import { getPhoneCode, validataCode, userRegister, userZhuche } from '@/common/api/userLogin.js';
	
	export default {
		data() {
			return {
				// 表单的数据
				form: {
					name: '',
					truename: '',
					email: '',
					sex:'男',
					age: 20,
					address:'',
					phone:'',
					password: '',
					checkPassword: ''
				},
				isValidate: true, // 用作验证这些表单是否都通过验证
				getCodeNum: 0
			}
		},
		methods: {
			setSex(sex){
				this.form.sex  = sex
			},
			// 校验验证码
			validataCode: function() {
				if(this.form.name==''||this.form.name==null||this.form.name==undefined){
					error('请填写昵称')
				}else if(this.form.truename==''||this.form.truename==null||this.form.truename==undefined){
					error('请填写姓名')
				}else if(this.form.phone==''||this.form.phone==null||this.form.phone==undefined){
					error('请填写手机号码')
				}else if(isNaN(this.form.age)||this.form.age==0){
					error('请填写年龄')
				}else{
					if(this.form.password!=this.form.checkPassword){
						error('两次密码不一致，请确认')
					}else if(this.form.phone.length!=11){
						error('手机号码格式有误，请确认')
					}else{
						this.toAddCard()
					}
				}
			},
			// 将数据存进数据库后跳转到个人中心页面
			toAddCard:function(){
				userZhuche(this.form).then(res => {
					console.log(res.data)
					if(res.data==2) {
						error('重复注册！')
					}else if(res.data==1) {
						uni.showToast({
							title: '注册成功！',
							icon: 'success'
						})
						this.form = {
							name: '',
							truename: '',
							email: '',
							sex:'男',
							age: 20,
							address:'',
							phone:'',
							password: '',
							checkPassword: ''
						};
					} else {
						error('注册出错！')
					}
				}).catch(() => {
					uni.hideLoading()
					error('网络')
				})
					
			},
			// 用于表单的判断
			inputCheck:function(name, rule, value){
				let _this = this
				var error = inputCheck(name, rule, this.form[value])
				if(error !== 'ok'){
					this.isValidate = false;
					this.form[value] = ''
					error(error)
				} else {
					return
				}
			},
			// 判断两次输入发密码
			checkPassword:function(){
				var error = checkPassword(this.form.password, this.form.checkPassword)
				if(error !== 'ok'){
					this.isValidate = false
					error(error)
					return 
				} else {
					this.isValidate = true
					return
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/scss/form.scss';
page{
	// background: #F2F2F2;
}
// 注册按钮
.button{
	@extend .button-box;
	margin-top: 50rpx;
}
.select-style{
	width:170px;
	margin-top: 5px;
	margin-bottom: 5px;
	height: 35px;
}
.radios-button-outbox {
		width: 100%;
		height: 100%;
		@include flex-direction(row);
		justify-content: space-between;

		.radios-button-inbox {
			width: 50%;
			height: 100%;
			@include flex-direction(row);
			align-items: center;

			.icon {
				@include icon-size(50rpx, 50rpx);
				margin-right: 20rpx;
			}

			.text {
				@include font-style(16px, 400, #000000);
			}
		}
	}
</style>
